Efecto opacidad en un post.

El efecto opacidad tiene su encanto, vimos como con unos sencillos pasos añadíamos opacidad a diferentes partes del blog.
Hoy no vamos a cambiar el aspecto del blog, pero si que podremos añadir ese efecto a una entrada especifica.
Lo vamos a hacer de forma que agregamos a los CSS un elemento div con una altura y anchura fija y una imagen de fondo. Luego creamos un espacio interior más pequeño también con anchura y altura fija, además crearemos una separación transparente.
Nos situaremos justo antes de ]]></b:skin> y agregamos lo siguiente:

div.background
{
width: 500px;
height: 250px;
background: url(url-de-tu-imagen-de-fondo) repeat;
border: 2px solid black;
}

div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}

Donde dice:

div.background
{
width: 500px;
height: 250px;

Debemos modificar width: 500px; considerando que el width (ancho) no debe ser superior al de las entradas de nuestro blog.
Podemos averiguar el width buscando en nuestra plantilla #main-wrapper { si por ejemplo tenemos width: 410px; sustituimos en el código width: 500px; por 410px;
En nuestros post no utilizamos height, es obvio que conforme vamos escribiendo el post va extendiéndose sin límite. Para añadir este efecto es diferente, hay que marcar donde finaliza la imagen y el efecto de transparencia.
En height: 250px; es el valor de la altura de nuestra entrada, aumentaremos según vamos a necesitar espacio para nuestro texto sustituyendo height: 250px; por un valor mayor o menor.

Una vez modificamos div.background ya tenemos el marco exterior.

Ahora lo haremos con div.transbox para el marco interior. Lo que haremos será calcular el tamaño que necesitamos para incluir el texto, considerando que siempre debe ser menor que el marco exterior.

div.transbox
{
width: 400px;
height: 180px;

Guardamos los cambios y nos vamos a nuestro editor de entradas donde añadiremos lo siguiente:

<div class="background">
<div class="transbox">
<p>
texto-texto-texto-texto-texto-texto-
texto-texto-texto-texto-texto-texto-
texto-texto-texto-texto-texto-texto-
texto-texto-texto-texto-texto-texto-
texto-texto-texto-texto-texto-texto-
</p>
</div>
</div>

"Donde texto, es el espacio donde podemos escribir nuestra entrada"

Si queremos repetir este efecto en diferentes entradas sólo debemos añadir este último código en las entradas posteriores.